<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
	<meta charset="utf-8" />
	<title>虚空裂隙</title>
	<link th:href="@{css/fonts.css}" rel="stylesheet"/>
	<style>
		body {
			color: #e1e7ec;
			background-color: #0d1620;
			padding: 20px;
		}

		/* 头部样式 */
		.header {
			background: linear-gradient(90deg, #1a2c38, #0d1620);
			border-radius: 12px;
			padding: 20px;
			margin-bottom: 15px;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
		}

		.header span {
			font-size: 28px;
			font-weight: 700;
			color: #61dafb;
			text-shadow: 0 0 10px rgba(97, 218, 251, 0.5);
			letter-spacing: 2px;
		}

		/* 内容卡片样式 */
		.content {
			background: linear-gradient(135deg, #1a2c38, #162736);
			border-radius: 12px;
			margin-bottom: 15px;
			padding: 15px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
			transition: transform 0.2s ease;
			border-left: 4px solid #61dafb;
		}

		/* 表格样式 */
		table {
			width: 100%;
			border-collapse: collapse;
		}

		td {
			padding: 10px;
			vertical-align: middle;
		}

		td:first-child {
			width: 80px;
			text-align: center;
		}

		td:last-child {
			width: 60px;
			text-align: center;
		}

		/* 图片样式 */
		img {
			max-width: 50px;
			height: auto;
			border-radius: 8px;
			filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
		}

		/* 列表样式 */
		ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}

		li {
			margin-bottom: 6px;
			font-size: 15px;
		}

		/* 任务类型样式 */
		.task {
			color: #ff7e5f;
			font-weight: bold;
			font-size: 16px;
		}

		/* 裂隙类型样式 */
		.fissues-type {
			color: #7bed9f;
			font-weight: bold;
		}

		/* 时间样式 - 根据剩余时间变色 */
		.time-low {
			color: #ff6b6b;
		}

		.time-medium {
			color: #feca57;
		}

		.time-high {
			color: #1dd1a1;
		}

		/* 分隔线 */
		hr {
			border: 0;
			height: 1px;
			background: linear-gradient(to right, transparent, #61dafb, transparent);
			margin: 10px 0;
		}

		/* 位置信息 */
		.location {
			color: #dfe6e9;
			font-weight: 500;
		}
	</style>
</head>
<body>
<w>1400</w>
<div>
	<div class="header">
		<span th:text="${type == 0 ? '虚空裂隙' : (type == 1 ? '九重天裂隙' : (type == 2 ? '钢铁裂隙' : '')) }"></span>
	</div>
	<hr/>
	<div th:each="f:${fissues}">
		<div class="content">
			<table>
				<tr>
					<td><img
							th:src="@{'img/'+${f.getVoidEnum().name() == 'VoidT1' ? 'lith' :
                            (f.getVoidEnum().name() == 'VoidT2' ? 'meso' :
                            (f.getVoidEnum().name() == 'VoidT3' ? 'neo' :
                            (f.getVoidEnum().name() == 'VoidT4' ? 'relics/axi' :
                            (f.getVoidEnum().name() == 'VoidT5' ? 'relics/Lich':
                            'relics/omnia'))))}+'.png'}"
							alt=""/></td>
					<td style="text-align: left;">
						<ul>
							<li>
								<span class="task" th:text="${f.getMissionType()} +'-'+ ${f.nodes.getFactionName().getName()}"></span>
							</li>
							<li>
                                <span class="fissues-type"
									  th:text="${f.getVoidEnum().getName()}+ ' 裂隙'"></span>
							</li>
							<li th:text="${f.node}">

							</li>
							<li th:text="${f.getTimeLeft()}"></li>
						</ul>
					</td>
					<td><img th:src="@{'img/faction/'+ ${f.nodes.getFactionName().name()} +'.png'}" alt=""/></td>
				</tr>
			</table>
		</div>
	</div>
</div>
</body>
</html>
